<template>
	<div>
		<div class="container">
			<div class="header ">
				<headerLink></headerLink>
			</div>
			<div class="body">
				<div class="left">
					<div class="left1">
						<basics2></basics2>
					</div>
					<div class="left2">
						<basics3></basics3>
					</div>
					<div class="left3">
						<basics7></basics7>
					</div>
					<div class="left4">
						<bar1></bar1>
					</div>
				</div>
				<div class="center">
					<baiduMap></baiduMap>
				</div>
				<div class="right">
					<div class="right1">
						<dayBlock></dayBlock>
					</div>
					<div class="right2">
						<heatmap></heatmap>
					</div>
					<div class="right3">
						<lineCharts2></lineCharts2>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import headerLink from './components/header3'
	import baiduMap from './components/baiduMap'
	import lineCharts2 from './components/lineCharts2'
	import bar1 from './components/bar1'
	import dayBlock from './components/block'
	import basics2 from './components/basics2'
	import basics3 from './components/basics3'
	import basics7 from './components/basics7'
	import heatmap from './components/heatmap'
	export default {
		components: {
			headerLink,
			baiduMap,
			lineCharts2,
			bar1,
			dayBlock,
			basics2,
			heatmap,
			basics3,
			basics7
		},
		data() {
			return {
				timer: null
			}
		},
		created() {


		},

		mounted() {

		},
		methods: {

		}
	}
</script>
<style lang="scss" scoped>
	.container {
		position: absolute;
		display: flex;
		flex-direction: column;
		background: url(/img/bigScreen/16.png)no-repeat;
		background-size: 100% 100%;
		width: 100%;
		::-webkit-scrollbar {
			display: none;
		}
		* {
			box-sizing: border-box;
		}
	}
	
	.header {
		height: 86px;	
		margin-bottom: 10px;	
	}	
	
	.body {
		height: 984px;
		display: flex;
		justify-content: space-between;
		.left {
			width: 27%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.left1 {
				height: 18.3%;
			}
			.left2 {
				height: 21.3%;
			}
			.left3 {
				height: 21.3%;
			}
			.left4 {
				height: 36%;
			}
		}
		.center {
			width: 45%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.right {
			width: 27%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.right1 {
				height: 31.3%;
			}
			.right2 {
				height: 31.3%;
			}
			.right3 {
				height: 36%;
			}
		}
	}
</style>